<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,user-scalable=no,initial-scale=1" name="viewport">
    <title>Crush</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/fontsize.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="./js/jQuery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper-bundle.min.js"></script>
    <link  rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="shortcut icon" href="./bitbug_favicon.ico" />
    <link rel="stylesheet" href="./iconfont/iconfont.css">
  </head>
<body>
    
 <!--  头部 -->
       <div class="header">
        <div class="showTime"></div>
        <ul class="nav">
            <li class="nav-item">
              <a class="nav-link active" href="./index.html">home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./egg.html">We</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./like.html">Like</a>
            </li>
        </ul>
        </div>
  <!--   头部 -->
  <p>
    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
      XuLin <span class="iconfont icon-nanxing"></span>
    </a>
    </p>
  <div class="collapse" id="collapseExample">
    <div class="card card-body">
      <div class="card mb-3" style="max-width: 540px;">
        <div class="row no-gutters">
          <div class="col-md-4">
            <img src="./images/dz1.jpg" alt="">
            <img src="./images/lilin.jpg" alt="...">
          </div>
          <div class="col-md-8">
            <div class="card-body">
              <h5 class="card-title">XuLin</h5>
              <p class="card-text">day day up!!!!</p>
              <p class="card-text"><small class="text-muted">2023.3.18</small></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>



  <p>
    <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">BabyXue <span class="iconfont icon-nvxing"></span></a>
   </p>
  <div class="row">
    <div class="col">
      <div class="collapse multi-collapse" id="multiCollapseExample1">
        <div class="card card-body">
          <img src="./images/dz2.jpg" alt="">
          <img src="./images/01.jpg" alt="...">
          <h5 class="card-title">LuoXue</h5>
              <p class="card-text">wo di bao bao dan ~</p>
              <p class="card-text"><small class="text-muted">2023.3.18</small></p>
        </div>
      </div>
    </div>
   
  </div>
</body>
<style>
html { overflow-x:hidden; }
    body{
     background-image: url("./images/aiqing.jpg");
    background-color: black;
     background-repeat: no-repeat;
    }

       .header{
    height: 2.5rem;
    background-color: plum;
   }
   .nav-item a{
    color: white !important;
   }
 
   .nav-item a:hover{
    color:green !important;
   }
   

   .btn btn-primary{
    width: 33% !important;
   }
   p{
     display: flex;
     justify-content: space-around;
   }

   .btn{
    background-color: gold !important;
    margin-right: 70%;
    margin-top: 10px;
    border-radius: 15px;
   }

   img{
    width: 17rem;
   }
   
   .card{
    background-color: gray;
    width: 80%;
   }
  

  span{
     color: black !important;
  }
  
  .showTime{
    position: absolute;
    right:0;
    top: 0;
    font-size: 7px;
    color: pink;
}
</style>
<script>
   var t = null;
    t = setTimeout(time, 1000);//開始运行
    function time() {
        clearTimeout(t);//清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();//获取时
        var m = dt.getMinutes();//获取分
        var s = dt.getSeconds();//获取秒
        document.querySelector(".showTime").innerHTML =  y + "年" + mt + "月" + day + "日" + h + ":" + m + ":" + s;
        t = setTimeout(time, 1000); //设定定时器，循环运行     
    }
</script>
</html>